import React, {useCallback, useEffect, useState} from "react"

import {getCategoryList, getProList, getSearchList, updateFlag} from "../../api/pro";
import {
  Space,
  Table,
  Button,
  Image,
  Switch,
  Select,
  Input,
} from "antd";

const {Option} = Select
const Com = () => {
  // 列表数据
  const [proList, setProList] = useState( [] )
  // 固定头和列
  const [height, setHeight] = useState( 500 )
  // 分页器
  const [current, setCurrent] = useState( 1 )
  const [pageSize, setPageSize] = useState( 10 )
  // 分类数据
  const [cateList, setCateList] = useState( [] )
  // 筛选数据
  const [category, setCategory] = useState( '' )
  const [search, setSearch] = useState( '' )

  const columns = [
    {
      title: '序号',
      width: 55,
      fixed: 'left',
      align: 'center',
      render: (text, record, index) => (<span>{(current - 1) * pageSize + index + 1}</span>)
    },
    {
      title: '图片',
      width: 80,
      fixed: 'left',
      dataIndex: 'img1',
      align: 'center',
      render: (text, record, index) => (<Image src={text} style={{width: 80, height: 80}}/>)
    },
    {
      title: '名称',
      width: 150,
      fixed: 'left',
      align: 'center',
      dataIndex: 'proname',
    },
    {
      title: '品牌',
      width: 110,
      dataIndex: 'brand',
      align: 'center',
    },
    {
      title: '分类',
      width: 110,
      dataIndex: 'category',
      align: 'center',
      filters: cateList,
      onFilter: (value, record) => record.category.indexOf( value ) === 0
    },
    {
      title: '原价',
      width: 110,
      dataIndex: 'originprice',
      align: 'center',
      sorter: (a, b) => a.originprice - b.originprice
    },
    {
      title: '折扣',
      width: 110,
      dataIndex: 'discount',
      align: 'center',
      sorter: (a, b) => a.discount - b.discount
    },
    {
      title: '销量',
      width: 110,
      dataIndex: 'sales',
      align: 'center',
      sorter: (a, b) => a.sales - b.sales
    },
    {
      title: '是否售卖',
      width: 55,
      fixed: 'right',
      dataIndex: 'issale',
      align: 'center',
      render: (text, record, index) => {
        return (
            <Switch checked={text === 1} onChange={checked => {
              updateFlag( {
                proid: record.proid,
                type: 'issale',
                flag: checked
              } ).then( () => {
                getData()
              } )
            }}>

            </Switch>
        )
      }
    },
    {
      title: '是否秒杀',
      width: 55,
      fixed: 'right',
      dataIndex: 'isseckill',
      align: 'center',
      render: (text, record, index) => {
        return (
            <Switch checked={text === 1} onChange={checked => {
              updateFlag( {
                proid: record.proid,
                type: 'isseckill',
                flag: checked
              } ).then( () => {
                getData()
              } )
            }}>
            </Switch>
        )
      }
    },
    {
      title: '是否推荐',
      width: 55,
      fixed: 'right',
      dataIndex: 'isrecommend',
      align: 'center',
      render: (text, record, index) => {
        return (
            <Switch checked={text === 1} onChange={checked => {
              updateFlag( {
                proid: record.proid,
                type: 'isrecommend',
                flag: checked
              } ).then( () => {
                getData()
              } )
            }}>
            </Switch>
        )
      }
    },
    {
      title: '操作',
      width: 200,
      fixed: 'right',
      align: 'center',
      render: (text, record, index) => (
          <Space>
            <Button>编辑</Button>
            ｜
            <Button>删除</Button>
          </Space>
      )
    },
  ]
  useEffect( () => {
    getCategoryList().then( res => {
      const arr = []
      res.data.forEach( item => {
        arr.push( {text: item, value: item} )
      } )
      setCateList( arr )
    } )
  }, [cateList] )

  const getData = () => {
    getProList().then( res => {
      console.log( res.data )
      setProList( res.data )
    } )
  }

  /**
   * @param {((prevState: number) => number)|number} page
   * @param {((prevState: number) => number)|number} pageSize
   */
  const changePage = (page, pageSize) => {
    setCurrent( page )
    setPageSize( pageSize )
  }

  useState( () => {
    setHeight( window.innerHeight - 110 - 175 )
  } )

  useEffect( () => {
    getData()
  }, [] )

  const handleChange = useCallback( (value) => {
    setCategory( value )
    setSearch('')
  }, [] )

  const getSearch = useCallback( (e) => {
    setSearch( e.target.value )
  }, [] )

  const searchFn = () => {
    getSearchList( {category, search} ).then( res => {
      setProList( res.data )
    } )
  }

  return (
      <Space direction="vertical" style={{width: '100%'}}>
        <Space>
          <Select
              value={category}
              style={{width: 120}}
              onChange={handleChange}
          >
            <Option value=''>全部</Option>
            {
              cateList.map( item => {
                return (
                    <Option key={item.text} value={item.text}>{item.text}</Option>
                )
              } )
            }
          </Select>
          <Input placeholder="请输入需要查询的名称的关键词" value={search} onChange={getSearch}/>
          <Button type='primary' onClick={searchFn}>搜索</Button>
        </Space>
        <Table
            dataSource={proList}
            columns={columns}
            rowKey="proid"
            pagination={{
              position: ['bottomRight'],
              current,
              pageSize,
              onChange: changePage,
              pageSizeOptions: ['5', '10', '15', '20'],
              showQuickJumper: true,
              showTotal: (total) => <span style={{marginRight: '250px'}}>共有 {total} 条数据</span>
            }}
            scroll={{x: 1500, y: height}}
        />
      </Space>
  )
}

export default Com
